<template>
  <div>
    <van-icon
      color="#777"
      :name="!value ? 'star-o' : 'star'"
      :class="{'active': value}"
      @click="collectFn"
    />
  </div>

</template>

<script>
import {addCollect, deleteCollect} from '@/api/article'

export default {
  props: ['value', 'articleId'],
  methods: {
    async collectFn() {
      try {
        if(this.value) {
          // 去校收藏
          await deleteCollect(this.articleId)
        } else {
          // 收藏
          await addCollect(this.articleId)
        }

        this.$emit('input', !this.value)

        this.$toast('操作成功')
      } catch(err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang='less' scoped>
.van-icon {
  font-size: 40px!important;
}
.active {
  color: pink!important;
}
</style>
